<!DOCTYPE html>
<html lang="en" style="font-size: 16px">
<head>
    <meta charset="UTF-8">
    <!--移动设备优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <!-- 引入样式文件-->
    <link rel="stylesheet" href="./css/index.css">
    <!--引入字体图标库-->
    <link rel="stylesheet" href="./res/fontawesome-free-6.4.0-web/css/all.css">

</head>
<body>
<!--定义app整体结构-->
<div id="app" class="colum">
    <!--播放器头部-标题区域-->
    <div class="music-head center">
        <img src="./img/logo.png" height="60%" alt="">
    </div>
    <!--播放器主体-唱片，封面图，歌曲名称信息-->
    <div class="music-body">
        <!--背景-->
        <img src="./img/cover.jpg" id="bg">
        <!--歌曲名-->
        <div class="music-name">最美的期待</div>
        <!--唱片-->
        <div class="cover center">
            <img src="./img/cover.jpg" class="cover-img">
        </div>
    </div>
    <!--播放器底部-控制区域：进度条，时间，控制按钮等-->
    <div class="music-foot">
        <!--进度条：触控区域-->
        <div class="progress-box">
            <!--轨道-->
            <div class="progress-trace">
                <!--实际进度-->
                <div class="progress">
                    <!--滑块-->
                    <div class="thumb"></div>
                </div>
            </div>
        </div>
        <!--时间显示-->
        <div class="time row">
            <div class="time-now">01:22</div>
            <div class="time-total">04:38</div>
        </div>
        <!--控制按钮-->
        <div class="btn-control row">
            <button class="btn-loop">
                <i class="fas fa-exchange"></i>
            </button>
            <button class="btn-prev">
                <i class="fas fa-backward-step fa-2x"></i>
            </button>
            <button class="btn-play-pause">
                <i class="fas fa-play fa-4x"></i>
            </button>
            <button class="btn-next">
                <i class="fas fa-forward-step fa-2x"></i>
            </button>
            <button class="btn-list">
                <i class="fas fa-list"></i>
            </button>
        </div>
    </div>
</div>
<!-- 歌曲列表弹出层:抽屉-->
<div class="music-list-wrapper">
    <!--关闭按钮-->
    <span id="btnClose" class="fas fa-close"></span>
    <!--歌曲列表-->
    <ul class="music-list"></ul>
</div>

<!--弹层提示：Toast-->
<div id="toast">
    <span id="msg">列表循环</span>
</div>

<!--导入jquery库-->
<script src="./res/jquery-3.6.0.min.js"></script>
<script src="./js/index.js"></script>
</body>
</html>